<script setup>
import { reactive, ref } from 'vue';
import { getTplTags, insertTplSetting, updateTplSetting } from '@/api/tpl.js';
import { useGlobalAbility } from '@/mixins/getGlobalAbility.js';

const { $message, $lodash } = useGlobalAbility();
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const $emits = defineEmits(['close']);
// 弹窗关闭
function closeDialog() {
  $emits('close');
}
const form = reactive({
  tplCode: '',
  tagId: null,
  tagName: '',
  fontFamily: '',
  fontSize: '',
  fontColor: null,
  isBold: 0,
  id: '',
  lineSpace: '',
  beforeSpace: '',
  afterSpace: '',
});
if (!$lodash.isEmpty(props.data)) {
  console.log(props.data);
  Object.assign(form, props.data);
}
// 获取模块下拉框
const tagOption = ref([]);
async function getTags() {
  const returnData = await getTplTags();
  if (returnData?.code === 200) {
    tagOption.value = returnData?.data;
  }
}
function tagIdChange(value) {
  const filterData = tagOption.value.filter((item) => item.tagId === value);
  form.tagName = filterData[0].tagName;
}
getTags();
// 保存字体
async function handleOk() {
  const api = form.id ? updateTplSetting : insertTplSetting;
  const returnData = await api({ ...form });
  if (returnData?.code === 200) {
    $message.success('操作成功');
    $emits('close', true);
  } else {
    $message.error(returnData?.msg);
  }
}
</script>

<template>
  <el-dialog :model-value="true" title="字体设置" @close="closeDialog" :width="400">
    <div class="content">
      <el-form :model="form" :label-width="80">
        <el-form-item label="模块">
          <el-select v-model="form.tagId" placeholder="请选择模块" @change="tagIdChange">
            <el-option
              v-for="item in tagOption"
              :key="item.tagId"
              :label="item.tagName"
              :value="item.tagId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字体">
          <el-input v-model="form.fontFamily" placeholder="请输入字体" />
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input v-model="form.fontSize" placeholder="请输入字体大小" />
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-input v-model="form.fontColor" placeholder="请输入字体颜色" />
        </el-form-item>
        <el-form-item label="行间距">
          <el-input v-model="form.lineSpace" placeholder="请输入行间距" />
        </el-form-item>
        <el-form-item label="段前间距">
          <el-input v-model="form.beforeSpace" placeholder="请输入行间距" />
        </el-form-item>
        <el-form-item label="段后间距">
          <el-input v-model="form.afterSpace" placeholder="请输入行间距" />
        </el-form-item>
        <el-form-item label="是否加粗">
          <el-radio-group v-model="form.isBold">
            <el-radio :value="0">否</el-radio>
            <el-radio :value="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="handleOk">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="less">
@import './fontEditDialog.less';
</style>
